<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改个人信息</title>
</head>
<body>
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-title">
                个人信息
            </div>
            <div class="panel-body">
                <!-- Start Row -->
                <div class="row">

                    <div id="myForm" class="form-horizontal">
                        <div :class="clazz.usernameClazz">
                            <label for="username" class="col-sm-2 control-label form-label">用户名</label>
                            <div class="col-sm-9">
                                <input @change="initClazz($event)" type="text" class="form-control" id="username" placeholder="admin" v-model="username" disabled />
                            </div>
                        </div>
                        <div :class="clazz.fullnameClazz">
                            <label for="fullname" class="col-sm-2 control-label form-label">姓名</label>
                            <div class="col-sm-9">
                                <input @change="initClazz($event)" type="text" class="form-control" id="fullname" placeholder="大白" v-model="fullname"/>
                            </div>
                        </div>
                        <div  :class="clazz.userphoneClazz">
                            <label for="userphone" class="col-sm-2 control-label form-label">手机号</label>
                            <div class="col-sm-9">
                                <input @change="initClazz($event)" type="number" class="form-control" id="userphone" placeholder="1888888888" v-model="userphone"/>
                            </div>
                        </div>
                        <div  :class="clazz.usersphoneClazz">
                            <label for="usersphone" class="col-sm-2 control-label form-label">手机短号</label>
                            <div class="col-sm-9">
                                <input @change="initClazz($event)" type="number" class="form-control" id="usersphone" placeholder="68888" v-model="usersphone"/>
                            </div>
                        </div>
                        <div  :class="clazz.emailClazz">
                            <label for="email" class="col-sm-2 control-label form-label">电子邮箱</label>
                            <div class="col-sm-9">
                                <input @change="initClazz($event)" type="email" class="form-control" id="email" placeholder="email@XX.com" v-model="email"/>
                            </div>
                        </div>
                        <div :class="clazz.userphotoClazz">
                            <label for="userphoto" class="col-sm-2 control-label form-label">头像</label>
                            <div class="col-sm-9">
                                <input @change="getUserphoto($event)" type="file" accept="image/x-png,image/jpeg"
                                       class="form-control dropify" data-height="100"
                                       data-max-file-size="1M" data-max-file-size-preview="1M"
                                       id="userphoto" v-model="uphoto" />
                                <span id="helpBlock" class="help-block">*图片仅支持.jpg / .png格式，大小1M以内*</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-9">
                                <button id="saveUserBtn" @click="saveUser()" style="width: 100%" type="button" class="btn btn-default">保存</button>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- End Row -->
            </div>
        </div>
    </div>

<script>
    $(function () {
        //方法
        var methods = {
            //保存用户信息
            saveUser:function () {
                if(isEmpty(this.username)){
                    spop("用户名不能为空", 'error');
                    this.$set(this.clazz,'usernameClazz','form-group has-error');
                    return;
                }
                if(this.username.length>32){
                    spop("用户名过长", 'error');
                    this.$set(this.clazz,'usernameClazz','form-group has-error');
                    return;
                }
                if(isEmpty(this.userphone)){
                    spop("手机号不能为空", 'error');
                    this.$set(this.clazz,'userphoneClazz','form-group has-error');
                    return;
                }
                if(this.userphone.length!==11){
                    spop("手机号格式不正确", 'error');
                    this.$set(this.clazz,'userphoneClazz','form-group has-error');
                    return;
                }
                if(!isEmpty(this.usersphone) && this.usersphone.length>5){
                    spop("手机短号过长", 'error');
                    this.$set(this.clazz,'usersphoneClazz','form-group has-error');
                    return;
                }
                if(!isEmpty(this.email)){
                    if(!isEmail(this.email)){
                        spop("邮箱地址格式不正确", 'error');
                        this.$set(this.clazz,'emailClazz','form-group has-error');
                        return;
                    }else if(this.email.length>128){
                        spop("邮箱地址过长", 'error');
                        this.$set(this.clazz,'emailClazz','form-group has-error');
                        return;
                    }
                }

                var _this = this;
                put('/service/sysUser/editUserInfo',function (result) {
                    if(result.success) {
                        spop({
                            template: '保存成功',
                            autoclose: 5000,
                            style:'success'
                        });
                        if (_this.userphoto != null) {//上传头像
                            var formData = new FormData();
                            formData.append('userphoto', _this.userphoto);
                            formData.append('userId', result.data.userId);
                            fetchRequest('POST', '/service/sysUser/uploadPhoto', function (res) {
                                if (res.success) {
                                    spop({
                                        template: '上传头像成功',
                                        autoclose: 5000,
                                        style:'success'
                                    });
                                } else {
                                    spop(res.message, 'error');
                                }
                            }, formData);
                        }
                    }else {
                        spop(result.message, 'error');
                    }
                },{
                    username: _this.username,
                    fullname: _this.fullname,
                    userphone: _this.userphone,
                    usersphone: _this.usersphone,
                    email: _this.email
                });
            },
            //初始化输入框样式 change时调用
            initClazz:function (event) {
                var id = event.target.id;
                if(this.clazz[id+'Clazz']!=='form-group'){
                    this.$set(this.clazz, id+'Clazz', 'form-group');
                }
                var val = event.target.value;
                if(id==='username'){
                    get('/service/sysUser/checkUsername',function (result) {
                        if(!result.success){
                            Vue.set(myFormApp.clazz,'usernameClazz','form-group has-error');
                            spop(result.message, 'error');
                        }
                    },{
                        userId: 'sessionId',
                        username:val
                    });
                }else if(id==='userphone'){
                    get('/service/sysUser/checkPhone',function (result) {
                        if(!result.success){
                            Vue.set(myFormApp.clazz,'userphoneClazz','form-group has-error');
                            spop(result.message, 'error');
                        }
                    },{
                        userId: 'sessionId',
                        userphone:val
                    });
                }else if(id==='email'){
                    get('/service/sysUser/checkEmail',function (result) {
                        if(!result.success){
                            Vue.set(myFormApp.clazz,'emailClazz','form-group has-error');
                            spop(result.message, 'error');
                        }
                    },{
                        userId: 'sessionId',
                        email:val
                    });
                }
            },
            //图片输入框change调用，判断图片大小
            getUserphoto:function (event) {
                this.$set(this.clazz, 'userphotoClazz', 'form-group');
                var files = event.target.files;
                if (files != null && files.length > 0) {
                    var size = files[0].size/1024;
                    if(size>1024){//图片大于1M
                        this.$set(this.clazz, 'userphotoClazz', 'form-group has-error');
                        spop('图片不能大于1M', 'error');
                    }else {
                        this.$set(this, 'userphoto', files[0]);
                    }
                }else{
                    this.$set(this, 'userphoto', null);
                }
            },
            //获取登录用户
            getLoginUserInfo:function () {
                get('/service/sysUser/getLoginUser',function (result) {
                    if(result.success){
                        var user = result.data;
                        Vue.set(myFormApp,'username',user.username);
                        Vue.set(myFormApp,'fullname',user.fullname);
                        Vue.set(myFormApp,'userphone',user.userphone);
                        Vue.set(myFormApp,'usersphone',user.usersphone);
                        Vue.set(myFormApp,'userphoto',null);
                        Vue.set(myFormApp,'uphoto',null);
                        myFormApp.userphotodropify.clearElement();
                        if(!isEmpty(user.userphoto)) {
                            myFormApp.userphotodropify.settings.defaultFile = user.userphoto;
                            myFormApp.userphotodropify.setFilename(user.userphoto);
                            myFormApp.userphotodropify.setPreview(user.userphoto);
                        }
                        Vue.set(myFormApp, 'email', user.email);
                    }else {
                        spop(result.message,'error')
                    }
                });
            }
        }
        //表单vue
        var myFormApp = new Vue({
            el:'#myForm',
            //属性
            data:{
                clazz:{usernameClazz:'form-group',
                    fullnameClazz:'form-group',
                    userphoneClazz:'form-group',
                    usersphoneClazz:'form-group',
                    emailClazz:'form-group',
                    userphotoClazz:'form-group'},
                username:null,
                fullname:null,
                userphone:null,
                usersphone:null,
                userphoto:null,
                uphoto:null,
                userphotodropify:null,
                email:null
            },
            methods: methods,
            mounted:function () {
                this.getLoginUserInfo();
                //input file 插件 初始化
                this.userphotodropify = new Dropify(document.getElementById('userphoto'),{messages:zhlanguage});
                // $('#userphoto').dropify({messages:zhlanguage});
            },
            updated: function () {}
        });
    });
</script>
</body>
</html>